本文共 6213 字,大约阅读时间需要 20 分钟。
-----------------------------------------------------------
在第一个魔改过程中,我们已经添加了两个按钮,文件上传和图片上传
现在,我们就对这两个按钮做一下事件处理
第一步:追加处理文件
在src\plugins文件夹中追加一个js文件,文件名自己定义即可
不过推荐文件名和按钮名一致,这样找起来方便
第二步:加载处理文件
在editor_api.js或自己指定的加载处理中,追加刚才的文件
scripts: [ 'editor.js', 'core/browser.js', 'core/utils.js', 'core/EventBase.js', 'core/dtd.js', 'core/domUtils.js', 'core/Range.js', 'core/Selection.js', 'core/Editor.js', 'core/Editor.defaultoptions.js', 'core/loadconfig.js', 'core/ajax.js', 'core/filterword.js', 'core/node.js', 'core/htmlparser.js', 'core/filternode.js', 'core/plugin.js', 'core/keymap.js', 'core/localstorage.js', 'plugins/defaultfilter.js', 'plugins/inserthtml.js', 'plugins/autotypeset.js', 'plugins/adwordfilter.js', 'plugins/autosubmit.js', 'plugins/background.js', 'plugins/image.js', 'plugins/justify.js', 'plugins/font.js', 'plugins/link.js', 'plugins/iframe.js', 'plugins/scrawl.js', 'plugins/removeformat.js', 'plugins/blockquote.js', 'plugins/convertcase.js', 'plugins/indent.js', 'plugins/print.js', 'plugins/preview.js', 'plugins/selectall.js', 'plugins/paragraph.js', 'plugins/directionality.js', 'plugins/horizontal.js', 'plugins/time.js', 'plugins/rowspacing.js', 'plugins/lineheight.js', 'plugins/insertcode.js', 'plugins/cleardoc.js', 'plugins/anchor.js', 'plugins/wordcount.js', 'plugins/pagebreak.js', 'plugins/wordimage.js', 'plugins/dragdrop.js', 'plugins/undo.js', 'plugins/copy.js', 'plugins/paste.js', 'plugins/puretxtpaste.js', 'plugins/list.js', 'plugins/source.js', 'plugins/enterkey.js', 'plugins/keystrokes.js', 'plugins/fiximgclick.js', 'plugins/autolink.js', 'plugins/autoheight.js', 'plugins/autofloat.js', 'plugins/video.js', 'plugins/table.core.js', 'plugins/table.cmds.js', 'plugins/table.action.js', 'plugins/table.sort.js', 'plugins/contextmenu.js', 'plugins/shortcutmenu.js', 'plugins/basestyle.js', 'plugins/elementpath.js', 'plugins/formatmatch.js', 'plugins/searchreplace.js', 'plugins/customstyle.js', 'plugins/catchremoteimage.js', 'plugins/snapscreen.js', 'plugins/insertparagraph.js', 'plugins/webapp.js', 'plugins/template.js', 'plugins/music.js', 'plugins/autoupload.js', 'plugins/autosave.js', 'plugins/charts.js', 'plugins/section.js', 'plugins/simpleupload.js', 'plugins/serverparam.js', 'plugins/insertfile.js', 'plugins/xssFilter.js', 'ui/ui.js', 'ui/uiutils.js', 'ui/uibase.js', 'ui/separator.js', 'ui/mask.js', 'ui/popup.js', 'ui/colorpicker.js', 'ui/tablepicker.js', 'ui/stateful.js', 'ui/button.js', 'ui/splitbutton.js', 'ui/colorbutton.js', 'ui/tablebutton.js', 'ui/autotypesetpicker.js', 'ui/autotypesetbutton.js', 'ui/cellalignpicker.js', 'ui/pastepicker.js', 'ui/toolbar.js', 'ui/menu.js', 'ui/combox.js', 'ui/dialog.js', 'ui/menubutton.js', 'ui/multiMenu.js', 'ui/shortcutmenu.js', 'ui/breakline.js', 'ui/message.js', 'adapter/editorui.js', 'adapter/editor.js', 'adapter/message.js', 'adapter/autosave.js', 'plugins/formatcontent.js', 'plugins/imageupload.js', 'plugins/attachment.js' ],
这里我们追加了adwordfilter、formatcontent、imageupload和attachment四个自定义文件,我们现在实现文件上传
第三步:实现按钮功能
先做图片上传吧,文件上传和图片上传其实是类似的,不过一个是超链接,一个是图片呈现,扩展名有点区别罢了
打开我们刚才创建的imageupload.js
UE.commands['imageupload'] = { execCommand: function () { }}
我们在这里追加一个和按钮同名的cmd,用来匹配对应的功能
第四步:实现文件上传
其实,百度编辑器里自带有文件上传、图片上传,为什么我们要自己实现呢?其实就是让用户偷懒,不用每次上传的时候点开浮层,再一个,就是不太想用编辑器自带的文件上传处理程序,想把上传处理独立到编辑器外边,毕竟一般情况下,我们都有自己已经写好的文件上传处理了
所以具体实现代码
UE.commands['imageupload'] = { execCommand: function () { var me = this; var file = $(''); var el = file[0]; file.on('change', function (e) { var files = $(this).get(0).files; var formData = new FormData(); formData.append('target', 'image'); for (var i = 0; i < files.length; i++) { if (files[i].size > 3 * 1024 * 1024) { alert('您选择的文件中有超出3M限制的文件,请重新选择并上传。'); return; } if (!/^image\/[a-z]+$/gi.test(files[i].type)) { alert('您选择的文件中有不是图片的文件,请重新选择并上传。'); return; } formData.append('fn' + i, files[i].name); formData.append('file' + i, files[i]); } $.ajax({ url: window.UE_Define.url + '/upload.aspx' , type: 'POST' , data: formData , cache: false , contentType: false , processData: false , success: function (data) { var filepath = eval('(' + data + ')'); var html = ''; me.execCommand('insertHtml', html); me.execCommand('formatcontent'); } }); }); el.click(); }}
在这里,我们使用js创建了一个file控件,并模拟点击,以达到文件选择的目的
至于扩展名,是否允许上传多个文件就都在控件里进行设置了
然后当文件控件值发生改变,即选中文件并确定的时候通过jquery将文件直接上传到我们指定的处理程序,并在上传成功后插入图片即可
嗯,success里的处理,按照自己家的返回格式处理,这个没通用的
转载地址:http://bxvxi.baihongyu.com/